<template>
  <div class="time-line">
    <el-timeline>
      <el-timeline-item v-for="article in articleList.value" :timestamp="article.CreateTime" placement="top">
        <el-card class="card">
          <h4 @click="articleDetail(article.Id)">{{ article.Title }}</h4>
          <span>更新时间 {{article.UpdateTime}}</span>
          <el-popconfirm title="确定要删除?" @confirm="delArticle(article.Id)">
            <template #reference>
              <el-button type="danger" class="del">Delete</el-button>
            </template>
          </el-popconfirm>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <!--  页码显示  -->
    <page :pageInfo="pageInfo" @handleCurrentChange="handleCurrentChange"/>
  </div>

</template>

<script lang="js">
import {GETA, PUTA} from "@/api/index.ts";
import {useRouter} from 'vue-router'
import localstorage from '@/tools/localstorage';

import Page from '@/components/page/Page.vue'
import {onBeforeMount, reactive} from "vue";
import {ElMessage} from "element-plus";
import {Delete} from '@element-plus/icons-vue'

export default {
  name: "TimeLine",
  components: {
    Page
  },
  setup() {
    const router = useRouter()
    const pageInfo = reactive({
      // 当前页
      currentPage: 1,
      // 每页的数量
      pageSize: 10,
      // 总条目数
      total: 10
    })

    // 文章列表信息
    const articleList = reactive({
      value: {}
    })

    const handleCurrentChange = (index) => {
      pageInfo.currentPage = index
      getArticles()
    }

    onBeforeMount(() => {
      // 在页面未加载到时候获取文章信息
      getArticles()
    });
    // console.log(localstorage.getItemObject("user"))
    const getArticles = async () => await GETA(`/Article/GetUserArticle?userId=${localstorage.getItemObject("user").Id}`, {}, {}).then(res => {
      if (res.status === 200) {
        // pageInfo.currentPage = res.data.current
        // pageInfo.total = res.data.total
        articleList.value = res.data.data
        console.log(articleList.value)
      } else {
        ElMessage.error("网络出现了异常，请重试一下")
      }
    }).catch(err => {
      console.log(err)
      ElMessage.error("访问出错啦，请重试一下")
    })

    const articleDetail = (articleId) => {
      router.push(`/articlePage/${articleId}`)
    }

    const delArticle = (articleId) => {
      
      PUTA(`Article/DeleteArticle?id=${articleId}`, {}, {}).then(res => {
        ElMessage.success("删除成功")
        getArticles()
      }).catch(err => {
        ElMessage.error("删除失败，请重试")
      })
    }
    return {
      pageInfo,
      articleList,
      handleCurrentChange,
      articleDetail,
      Delete,
      delArticle
    }
  }
}
</script>

<style scoped lang="scss">
.time-line {
  overflow-y: scroll;
  height: 100vh;
}

.card {
  position: relative;
  .del {
    position: absolute;
    top: 20px;
    right: 50px;
  }
}
</style>